
import { cookie } from "./tool.js";

class Detail{
    constructor(){
        // 获取当前页面的sid
        this.sid = location.search.substring(1).split("=")[1];
        if(!this.sid){
            this.sid=1;
        }

        this.minlist=$(".list_min_img .min_img_ul li")

        // 放大镜用的
        this.img_box = $('.img_box');
        this.img_box_img = $('.img_box img');
        this.move_box = $('.img_box .move_box');
    
        // 放大的容器和图片
        this.big_img = $('.big_img');
        this.big_img_img = $('.big_img img');

        // 加入购物车按钮
        this.addCar = $(".addcar");

        // 加减数量的按钮
        this.add = $(".right_but");
        this.text = $(".center_inp");
        this.clear = $(".left_but");

        // 获取左右点击按钮--小图切换
        this.minImg_leftbut = $(".list_min_img .icon-jiantou_liebiaoxiangzuo")
        this.minImg_rightbut = $(".list_min_img .icon-jiantou_liebiaoxiangyou")
    }
    init(){
        let _this = this;
        // 渲染部分
        $.ajax({
            type:"post",
            url:"http://localhost:3000/list/detaills",
            data:{
                sid:_this.sid
            },
            dataType:"json",
        }).then(function(data){
            console.log(data)
            $(".img_box img").prop("src",data[0].image);
            $(".right_box>h1").html(data[0].name);
            $(".right_box>span").html("￥"+(+data[0].pPrice).toFixed(2));
            $(".select_con li a span:nth-child(1)").html(data[0].name.substring(0,30));
            $(".select_con li a span:nth-child(2)").html("￥"+(+data[0].pPrice).toFixed(2));
            $(".numble .numble_txt span i").html("￥"+(+data[0].pPrice*$(".numble .numble_but input[type='text']").val()).toFixed(2))
            let min_imgs = data[0].image.split(",");
            let str = "";
            $.each(min_imgs,function(index,value){
                str+=`
                <li><img src="${min_imgs[index]}" alt="" /></li>
                `
            })
            $(".min_img_ul").html(str);
            $(".min_img_ul").find("li:first-child").addClass("active");
            $(".left_box .big_img img").prop("src",data[0].url)
            $(".left_box .big_img img").width(parseInt($(".img_box").width())*1.5)
            $(".left_box .big_img img").height(parseInt($(".img_box").height())*1.5)

            _this.move_box.width(_this.img_box.width()/(_this.big_img_img.width()/_this.big_img.width()))
            _this.move_box.height(_this.img_box.height()/(_this.big_img_img.height()/_this.big_img.height()))

            console.log(_this.img_box.width()/(_this.big_img_img.width()/_this.big_img.width()))
            // 当小图小于或等于六张的时候取消点击事件
            if($(".min_img_ul").find("li").length<=6){
                _this.minImg_rightbut.off()
                _this.minImg_leftbut.off()
                _this.minImg_rightbut.addClass("disabled")
                _this.minImg_leftbut.addClass("disabled")
            }
        })
        _this.result();
        _this.political()
        _this.banner()
        
    }
    // 细节效果+加购的细节
    result(){
        let _this = this;
        

        // 加减按钮事件
        _this.add.on("click",function(){
            // alert(parseInt(_this.text.val())+1)
            let num = parseInt(_this.text.val())+1
            _this.text.val(num)
            chenage_sumPrice()
            chenage()
        })
        // 加减按钮事件
        _this.clear.on("click",function(){
            let num = parseInt(_this.text.val())-1
            if(num<1){
                num=1;
            }
            _this.text.val(num)
            chenage_sumPrice()
            chenage()
        })
        // 文本框键入事件
        _this.text.on("input",function(){
           let reg = /^[1-9]\d*$/;
           if(!reg.test(_this.text.val())){
                _this.text.val(1)
           }
           if(_this.text.val()>999){
            _this.text.val(999)
           }
           chenage_sumPrice()
           chenage()
        })

        // 判断
        function chenage(){
            if(_this.text.val()==1){
                _this.clear.css({
                    color:"#ccc",
                    cursor:"no-drop"
                })
            }else{
                _this.clear.css({
                    color:"#000",
                    cursor:"pointer"
                })
            }

            if(_this.text.val()==999){
                _this.add.css({
                    color:"#ccc",
                    cursor:"no-drop"
                })
            }else{
                _this.add.css({
                    color:"#000",
                    cursor:"pointer"
                })
            }
        }
        chenage()







        // 提前指定一个cookie的名称cookieitem
        function check(key) {
            if (!cookie.get(key)) {
              return {};
            } else {
              return JSON.parse(cookie.get(key));
            }
          }
        // 加购事件
        let username = {}
        if(cookie.get("cookieUsername")){
        username = JSON.parse(cookie.get("cookieUsername"))
        }
        _this.addCar.on("click",function(){
            if(cookie.get("cookieUsername")){
                console.log(username.usernam);
                let obj = check(username.usernam+"list");
                alert("加购成功！！")
                if(obj["item"+_this.sid]){
                    obj["item"+_this.sid]=+_this.text.val()+ +obj["item"+_this.sid]
                }else{
                    obj["item"+_this.sid]=+_this.text.val();
                }
                cookie.set(username.usernam+"list",JSON.stringify(obj),10)
                _this.text.val(1)
                chenage_sumPrice()
                car_but_check()
            }else{
                if(confirm("您还未登录！！是否前往登录！！！")){
                    location.href="http://localhost/Samsung/frontend/login.html";
                }
            }
            
        })

        // 更新购物车数量
        function car_but_check(){
            let cookielist={};
            if(cookie.get(username.usernam+"list")){
            cookielist = JSON.parse(cookie.get(username.usernam+"list"));
            }
            let index =0;
            $.each(cookielist,function(i,v){
                ++index;
            })
            console.log(index)
            $(".mycar i").html(index)
        }
        
        // 修改总价格事件
        function chenage_sumPrice(){
            $(".numble_txt i").html("￥"+(parseFloat($(".select_con li a span:nth-child(2)").html().substring(1))*parseInt(_this.text.val())).toFixed(2))
        }
        

    }

    // 图片放大镜效果
    political(){
        let _this = this;
        _this.move_box.width()
        _this.img_box.on("mouseover",function(e){
            _this.move_box.css("display","block")
            _this.big_img_img.css("visibility","visible")
            _this.big_img.css("visibility","visible")
            $(document).on("mousemove",function(e){
                let x = $(e)[0].pageX -_this.img_box.offset().left-_this.move_box.width()/2
                let y = $(e)[0].pageY -_this.img_box.offset().top-_this.move_box.height()/2
                if(x<=0){
                    x=0
                }
                if(x>_this.img_box.width()-_this.move_box.width()){
                    x=_this.img_box.width()-_this.move_box.width()
                }
                if(y<=0){
                    y=0
                }
                if(y>_this.img_box.height()-_this.move_box.height()){
                    y=_this.img_box.height()-_this.move_box.height()
                }
                _this.move_box.css({
                    top:y,
                    left:x
                })
                _this.big_img_img.css({
                    top:y*(-_this.big_img.height()/_this.move_box.height()),
                    left:x*(-_this.big_img.width()/_this.move_box.width())
                })
                console.log(_this.move_box.width())
            })
            _this.img_box.on("mouseout",function(){
                _this.move_box.css("display","none")
                _this.big_img_img.css("visibility","hidden")
                _this.big_img.css("visibility","hidden")
                $(document).off()
            })
        })
    }
    
    // 轮播图效果
    banner(){
        let _this = this
        // 小图hover换图事件--事件委托
        $(".min_img_ul").on("mouseover","li",function(){
            $(".min_img_ul").find("li").removeClass("active");
            $(this).addClass("active")
            $(".left_box .big_img img").prop("src",$(this).children("img").prop("src"))
            $(".img_box img").prop("src",$(this).children("img").prop("src"))
        })

        

        // 左键事件
        _this.minImg_leftbut.on("click",function(){
            $(" .list_min_img .min_img_ul").find("li").animate({
                left:0+"px"
            },function(){
                _this.minImg_leftbut.addClass("disabled")
                _this.minImg_rightbut.removeClass("disabled")
            })

        })
        // 右键事件
        _this.minImg_rightbut.on("click",function(){
            $(" .list_min_img .min_img_ul").find("li").animate({
                left:-70+"px"
            },function(){
                _this.minImg_leftbut.removeClass("disabled")
                _this.minImg_rightbut.addClass("disabled")
            })
        })
    }




}


export{
    Detail
}







